<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :minHeight="100"
    :title="getTitle"
    @ok="handleSubmit"
  >
    <!-- <a-radio-group v-model:value="value1">
      <a-radio :value="1">按分组</a-radio>
      <a-radio :value="2">按相机</a-radio>
    </a-radio-group> -->
    <div class="flex items-center">
      <span class="nowrap"> 分组:&nbsp;&nbsp; </span>
      <a-select
        ref="select"
        mode="multiple"
        v-model:value="groups"
        style="width: 100%"
        :options="groupList"
      />
    </div>
    <div class="flex items-center mt-4">
      <span class="nowrap"> 相机:&nbsp;&nbsp; </span>

      <a-select
        ref="select"
        mode="multiple"
        v-model:value="cameras"
        style="width: 100%"
        :options="cameraList"
      />
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, unref } from 'vue';
  // import { useMessage } from '/@/hooks/web/useMessage';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  // import { postUsers, putUsers } from '/@/api/sys/user';
  // const { createMessage } = useMessage();
  import {
    bindRoleCameras,
    DeviceItem,
    getDeviceAll,
    getGroupList,
    GroupItem,
  } from '/@/api/sys/user';
  import { useMessage } from '/@/hooks/web/useMessage';
  // import { useUserStoreWithOut } from '/@/store/modules/user';
  // import { Radio, RadioGroup, Select } from 'ant-design-vue';
  import { Select } from 'ant-design-vue';

  export default defineComponent({
    name: 'AccountModal',
    components: { BasicModal, 'a-select': Select },
    emits: ['success', 'register'],
    setup(_) {
      const isUpdate = ref(true);
      let roleId = 0;
      // let oldUserName: string;
      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
        console.log(data);
        roleId = data.data.id;
        setModalProps({ confirmLoading: false });
        isUpdate.value = !!data?.isUpdate;
        fetchConfig();
        if (unref(isUpdate)) {
          // oldUserName = data.record.username;
        }
      });

      // const userStore = useUserStoreWithOut();

      const getTitle = computed(() => '角色相机配置');
      const { createMessage } = useMessage();
      async function handleSubmit() {
        // console.log(roleId, roles);
        let nums = [
          ...groups.value.map((v) => ({ type: 1, number: v.toString() })),
          ...cameras.value.map((v) => ({ type: 2, number: v })),
        ];

        bindRoleCameras({ role_id: roleId, asset_nums: nums }).then(() => {
          closeModal();
          createMessage.success('配置成功！');
        });

        // bindUserRoles({
        //   user_id: roleId,
        //   role_ids: roles.value.map((v) => v),
        // }).then(() => {
        //   closeModal();
        //   createMessage.success('配置成功！');
        // });
      }

      const groups = ref<number[]>([]);
      const groupList = ref<GroupItem[]>([]);
      const cameraList = ref<DeviceItem[]>([]);
      const cameras = ref<number[]>([]);

      function fetchConfig() {
        // getUserRole(roleId).then((res) => {
        //   roles.value = res.map((v) => (v as any).role_id);
        // });
      }
      getGroupList().then((res) => {
        groupList.value = res.map((v) => ({ ...v, label: v.name, value: v.id }));
      });
      getDeviceAll().then((res) => {
        cameraList.value = res.map((v) => ({ ...v, label: v.sim_number, value: v.sim_number }));
      });

      return { registerModal, getTitle, handleSubmit, cameras, groups, groupList, cameraList };
    },
  });
</script>
